<template>
  <div class="login">
    <div class="box">
<div class="title">
  <!-- <img src="@/assets/img/maizuo.jpg" alt=""> -->
  <span>卖座网后台管理系统</span>
  </div>

<el-form :label-position="labelPosition" label-width="80px" ref="formLabelAlign" :model="formLabelAlign" :rules="rules" class="form">
  <el-form-item  class="inputCenter"  prop="name">
       <template>
      <span class="text">账号</span>
  </template>
    <el-input v-model="formLabelAlign.name" class="input" placeholder="请输入账号" autofocus></el-input>
  </el-form-item>
 
  <el-form-item   prop="region" class="passwordIntex">
       <template>
      <span class="text">密码</span>
  </template>
    <el-input type="password" v-model="formLabelAlign.region" class="input" placeholder="请输入密码"></el-input>
  </el-form-item>
    <el-form-item class="login-password">
    <el-button class="button" type="primary" @click="submitForm" :loading="loading">登录</el-button>
    <!-- <el-button class="button" @click="resetForm">注册</el-button> -->
  </el-form-item>
 
</el-form>

</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading:false,
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },
         rules: {
          name: [
            { required: true, message: '请输入账号', trigger: 'blur' },           
          ],
          region:[
            {
              required: true, message: '请输入密码', trigger: 'blur'
            }
          ]
          }
      };
      
    },
    methods: {
      // //防抖
      // sntiShake(fn,delay){
      //   let time =null;
      //  return function(){
      //     clearTimeout(time)
      //  time= setTimeout(()=>{
      //     fn.call(this,arguments)
      //   },delay)
      //  }
      // },
      submitForm(login){
          console.log("成功",this.formLabelAlign.name,this.formLabelAlign.region)



    
        this.loading=true;
        let url="user/login"
    let data ={
        username:this.formLabelAlign.name,
        password:this.formLabelAlign.region
    }
        this.$axios.post(url,data).then(res=>{
                this.loading=false;
                let $this=this
               const success= this.$message.success("登录成功")
                setTimeout(function(){
                success.close()
                $this.$router.push('/home/homeContent')
                },500)              
            console.log("res",res)
            //登录成功后，把用户名带过去
            this.$store.commit('username',this.formLabelAlign.name);
            this.$store.commit('isLogin',true);
        }).catch(err=>{
            console.log(err);
          this.$message.error("登录失败");
              this.loading=false;
        })

  


        
      },
      resetForm(reset){
        this.formLabelAlign.name=""
        this.formLabelAlign.region=""
        console.log("取消")
          this.loading=false;
          this.$router.push('/register')
      }
    },

 
    
  }
</script>
<style lang="less" scoped>
  .login{     
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('../../assets/img/background4.jpg') no-repeat;
    background-size: 100%;
  }
  .box{
    margin: 100px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .title{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom:100px;
  font-size: 32px;
  color:#fff;
  font-weight: 900;

  // img{
  //   // height: 32x;
  //   width: 32px;
  //   margin-right: 5px;
  // }
  }
  .input{
      width: 530px;
      height: 50px;
  }
  .form{
    border: 1px solid #7b7c54;
    background: #cad5d9;
      width: 640px;   
      padding-bottom: 40px; 
      padding-top: 40px; 

      // padding-right: 20px; 

  }
  .text{
        // color: ;
        position: relative;
        top: 40px;
        left: -54px;
        font-size: 20px;
  }
  .inputCenter{
      display: flex ;
      justify-content: center;
      align-items: center;
  }
  .el-form-item__content{
      margin-left: 0px ;
      // width: 100%;
  }
  .login-password{
    position: relative;  
    width: 100%;
    padding-right: 20px;
    .button{
      display: block;     
        width: 530px;
    }
  }
  .passwordIntex{
    position: relative;
    top: -20px;
  }
</style>